<script setup lang="ts">
import { ref, useTemplateRef, watch } from 'vue';
import { onClickOutside } from '@vueuse/core';
import {
  EMITS_SEARCHCMP_CLEAR,
  EMITS_SEARCHCMP_BLUR,
  EMITS_SEARCHCMP_FOCUS,
  EMITS_SEARCHCMP_INPUT,
  EMITS_SEARCHCMP_SEARCH
} from '@/constants';
import type { SearchEmitsType } from './types';

defineOptions({ name: 'MSearch' });

const inputValue = defineModel({ default: '' });
const emits = defineEmits<SearchEmitsType>();

watch(inputValue, newValue => {
  emits(EMITS_SEARCHCMP_INPUT, newValue);
});

const isFocus = ref<boolean>(false);

const searchRef = useTemplateRef<HTMLDivElement>('searchRef');
onClickOutside(searchRef, () => {
  isFocus.value = false;
});
const onClear = () => {
  inputValue.value = '';
  emits(EMITS_SEARCHCMP_CLEAR, '');
};

const onSearch = () => {
  emits(EMITS_SEARCHCMP_SEARCH, inputValue.value);
};

const onFocus = () => {
  isFocus.value = true;
  emits(EMITS_SEARCHCMP_FOCUS);
};
const onBlur = () => {
  emits(EMITS_SEARCHCMP_BLUR);
};
</script>

<template>
  <div
    class="group relative rounded-xl border-white p-0.5 duration-500 hover:bg-red-100/40 dark:border-zinc-200"
    ref="searchRef"
  >
    <div class="">
      <MSvgIcon
        name="search"
        color="#707070"
        class="absolute top-[50%] left-2 h-1.5 w-1.5 translate-y-[-50%]"
      />
      <input
        v-model="inputValue"
        class="block h-[44px] w-full rounded-xl border border-zinc-100 bg-zinc-100 pl-4 text-sm font-semibold tracking-wide text-zinc-900 caret-zinc-400 outline-0 duration-500 group-hover:border-zinc-200 group-hover:bg-white focus:border-red-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:group-hover:border-zinc-700 dark:group-hover:bg-zinc-900"
        type="text"
        placeholder="搜索"
        @keyup.enter="onSearch"
        @focus="onFocus"
        @blur="onBlur"
      />
      <MSvgIcon
        v-show="inputValue"
        class="absolute top-[50%] right-9 h-1.5 w-1.5 translate-y-[-50%] cursor-pointer duration-500"
        name="input-delete"
        @click="onClear"
      />
      <div
        class="absolute top-[50%] right-[62px] h-1.5 w-[1px] translate-y-[-50%] bg-zinc-200 opacity-0 duration-500 group-hover:opacity-100"
      />
      <MButton
        class="absolute top-[50%] right-1 translate-y-[-50%] rounded-full opacity-0 duration-500 group-hover:opacity-100"
        icon="search"
        icon-color="#fff"
        @click="onSearch"
      />
    </div>
    <Transition name="slide">
      <div
        v-if="$slots.dropdown"
        v-show="isFocus"
        class="scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent absolute top-[56px] left-0 z-20 max-h-[368px] w-full overflow-auto rounded border border-zinc-200 bg-white p-2 text-base duration-500 hover:shadow-2xl dark:border-zinc-600 dark:bg-zinc-800"
      >
        <slot name="dropdown" />
      </div>
    </Transition>
  </div>
</template>

<style lang="css" scoped>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(40px);
}
</style>
